<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.7.6/dist/css/layui.css">
    <link rel="stylesheet" href="./css/styles.css">
    <script src="https://cdn.jsdelivr.net/npm/layui@2.7.6/dist/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="./js/teacher.js"></script>
</head>
<body>
<div class="layui-container custom-container">
    <h1>教师管理系统</h1>
    <div class="layui-row">
        <div class="layui-col-md5 ">
            <button id="addTeacherBtn" class="layui-btn animated fadeIn"><i class="layui-icon">&#xe654;</i> 添加教师</button>
        </div>
        <div class="layui-col-md7 text-right">
            <div class="layui-inline">
                <input type="text" id="employeeIdInput" placeholder="请输入职工编号" autocomplete="off" class="layui-input">
            </div>
            <button id="searchTeacherBtn" class="layui-btn animated fadeIn"><i class="layui-icon">&#xe615;</i> 查询</button>
        </div>
    </div>
    <table id="teacherTable" class="layui-table" lay-filter="teacherTable"></table>
    <!-- 分页组件 -->
    <div id="pagination" class="layui-box layui-laypage layui-laypage-default"></div>


</div>

<!-- 模板 -->
<script type="text/html" id="operationBar">
    <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
</script>

<!-- 教师详情表单模板 -->
<script type="text/html" id="teacherDetailFormTemplate">
    <form class="layui-form" lay-filter="teacherDetailForm" style="padding: 20px;">
        <!-- 添加隐藏的 id 字段 -->
        <input type="hidden" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">员工编号</label>
            <div class="layui-input-block">
                <input type="text" name="employeeId" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="text" name="gender" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学科</label>
            <div class="layui-input-block">
                <input type="text" name="subject" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="email" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input type="tel" name="phone" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">薪资</label>
            <div class="layui-input-block">
                <input type="number" name="salary" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-block">
                <input type="text" name="department" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否在职</label>
            <div class="layui-input-block">
                <input type="text" name="isActive" class="layui-input" readonly>
            </div>
        </div>
    </form>
</script>

<!-- 教师表单模板 -->
<script type="text/html" id="teacherFormTemplate">
    <form class="layui-form" lay-filter="teacherForm" style="padding: 20px;">
        <!-- 添加隐藏的 id 字段 -->
        <input type="hidden" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">员工编号</label>
            <div class="layui-input-block">
                <input type="text" name="employeeId" placeholder="请输入员工编号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <select name="gender" lay-verify="required">
                    <option value="">请选择性别</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学科</label>
            <div class="layui-input-block">
                <input type="text" name="subject" required lay-verify="required" placeholder="请输入学科" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="email" required lay-verify="required|email" placeholder="请输入邮箱" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input type="tel" name="phone" required lay-verify="required|phone" placeholder="请输入电话" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">薪资</label>
            <div class="layui-input-block">
                <input type="number" name="salary" required lay-verify="required" placeholder="请输入薪资" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-block">
                <input type="text" name="department" required lay-verify="required" placeholder="请输入部门" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" placeholder="请输入地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否在职</label>
            <div class="layui-input-block">
                <select name="isActive" lay-verify="required">
                    <option value="1">在职</option>
                    <option value="0">离职</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" lay-submit lay-filter="teacherFormSubmit" class="layui-btn">提交</button>
            </div>
        </div>
    </form>
</script>
</body>
</html>
